<template>
	<view class="user" :style="[background]">
		<!-- #ifndef  H5 || MP-ALIPAY -->
		<u-sticky offset-top="0" h5-nav-height="0" bg-color="transparent">
			<u-navbar :is-back="false" title="个人中心" :title-bold="true" :is-fixed="false" :border-bottom="false"
				:background="{ background: 'rgba(256,256, 256,' + navBg + ')' }"
				:title-color="navBg > 0.5 ? '#000' : '#fff'" />
		</u-sticky>
		<!-- #endif -->

		<!-- #ifdef MP-ALIPAY -->
		<view style="height: 80rpx;"></view>
		<!-- #endif -->

		<view class="header">
			<view class="user-info row-between">
				<view class="info row">
					<image class="avatar mr20 flexnone" @tap="goLogin"
						:src="isLogin ? userInfo.avatar : '/static/images/my_portrait_empty.png'"></image>
					<view class="white" v-if="isLogin">
						<view class="name xxl">
							<text class="text line1">{{userInfo.nickname}}</text>
							<image src="../../static/images/icon_20.png" mode="widthFix" class="img"></image>
						</view>
						<view class="user-id row-between" v-if="userInfo.sn">
							<view class="xs white ml20 mr20">会员ID: {{userInfo.sn || ''}}</view>
							<view class="xs normal copy-btn row-center ml5" @tap.stop="onCopy">复制</view>
						</view>
					</view>
					<view class="white" v-else @tap="goLogin">
						<view style="font-size: 42rpx">点击登录</view>
						<view class="sm">登录体验更多功能</view>
					</view>
				</view>
				<view class="row" style="align-self: flex-start;">
					<view class="user-opt" @tap="goPage('/bundle/pages/user_profile/user_profile')">
						<image style="width:58rpx;height: 58rpx;" src="/static/images/icon_my_setting.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="main">
			<!-- 我的订单 -->
			<view class="order-nav bg-white mt20">
				<view class="title row-between" @tap="goPage('/pages/user_order/user_order')">
					<view class="lg">我的订单</view>
					<view class="muted sm row">
						<text>全部订单</text>
						<image class="icon-sm ml10" src="/static/images/arrow_right.png"></image>
					</view>
				</view>
				<view class="nav row">
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=pay')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_pay" class="badge xs row-center bg-white">
								{{userInfo.wait_pay}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_payment.png"></image>
						</view>
						<view class="sm mt10">待付款</view>
					</view>
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=delivery')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_delivery" class="badge xs row-center bg-white">
								{{userInfo.wait_delivery}}
							</view>
							<image class="nav-icon mb10" src="/static/images/icon_my_fahuo.png"></image>
						</view>
						<view class="sm">待发货</view>
					</view>
					<view class="item column-center mb20" @tap="goPage('/pages/user_order/user_order?type=delivery')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_take" class="badge xs row-center bg-white">
								{{userInfo.wait_take}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_shouhuo.png"></image>
						</view>
						<view class="sm mt10">待收货</view>
					</view>
					<view class="item column-center mb20"
						@tap="goPage('/bundle/pages/goods_comment_list/goods_comment_list')">
						<view class="icon-contain">
							<view v-if="userInfo.wait_comment" class="badge xs row-center bg-white">
								{{userInfo.wait_comment}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_pingjia.png"></image>
						</view>
						<view class="sm mt10">商品评价</view>
					</view>
					<view class="item column-center mb20" @tap="goPage('/bundle/pages/post_sale/post_sale')">
						<view class="icon-contain">
							<view v-if="userInfo.after_sale" class="badge xs row-center bg-white">
								{{userInfo.after_sale}}
							</view>
							<image class="nav-icon" src="/static/images/icon_my_tuikuanshouhou.png"></image>
						</view>
						<view class="sm mt10">退款/售后</view>
					</view>
				</view>
			</view>

			<!-- 消息 -->
			<view class="message-bar row mt20">
				<view class="tag">提醒</view>
				<text class="text">您当前有1个待归还订单，最后归还日为本月18您当前有1个待归还订单，最后归还日为本月1</text>
				<u-icon name="play-right-fill" size="20"></u-icon>
			</view>

			<!-- 广告 -->
			<view class="mt20">
				<image style="width: 100%;height: auto;" mode="widthFix" src="/static/images/my_ab.png"></image>
			</view>

			<!-- 租赁 ｜ 回收 -->
			<view class="row-between mt20 menu-bar">
				<navigator class="lease-order-mode bg-white" url="/bundle/pages/lease_order_lists/lease_order_lists"
					hover-class="none">

					<view class="left">
						<text class="label">租赁订单</text>
						<text
							class="text">{{leaseOrderNum && leaseOrderNum > 0 ? ('共' + leaseOrderNum + '条订单 >') : '暂无订单'}}</text>
					</view>
					<u-icon name="/static/images/icon_22.png" width="92" />

				</navigator>
				<view class="line"></view>
				<navigator class="lease-order-mode bg-white" url="/bundle/pages/recycle_order_list/recycle_order_list"
					hover-class="none">

					<view class="left">
						<text class="label">趣换订单</text>
						<text
							class="text">{{recycleOrderNum && recycleOrderNum > 0 ? ('共' + recycleOrderNum + '条订单 >') : '暂无订单'}}</text>
					</view>
					<u-icon name="/static/images/icon_my_recycle.png" width="92" />

				</navigator>
			</view>
			
			<!-- 我的钱包 -->
			<view class="wallet-box mt20">
				<view>
					<view class="title row-between">
						<view class="lg">我的钱包</view>
					</view>
				</view>
				<view class="content">
					<navigator class="item" url="/package_user/pages/user_wallet_qh/index" hover-class="none">
						<view class="no">0.00</view>
						<view class="text-bar">
							<text class="label">趣换账户 ></text>
						</view>
					</navigator>
					<navigator class="item" url="/package_user/pages/user_wallet_yj/index" hover-class="none">
						<view class="no">0.00</view>
						<view class="text-bar">
							<text class="label">押金账户 ></text>
						</view>
					</navigator>
					<navigator class="item" url="/package_user/pages/user_wallet_ye/index" hover-class="none">
						<view class="no">0.00</view>
						<view class="text-bar">
							<text class="label">余额账户</text>
							<view class="tag">去使用></view>
						</view>
					</navigator>
				</view>
			</view>
			
			<!-- 签到 -->
			<view class="sign-in-box mt20">
				<view>
					<view class="title row">
						<view class="lg">我的签到</view>
						<text class="text">(连续签到趣换币每日递增，签满7日额外赠送50趣换币)</text>
					</view>
				</view>
				<view class="content">
					<view class="item" :class="'style-' + item.status" v-for="(item, index) in signInList" :key="index">
						<view class="box">
							<view class="img-box">
								<image v-if="item.status == 1" src="../../static/images/icon_23.png" mode="widthFix" class="img"></image>
								<image v-if="item.status == 2" src="../../static/images/icon_24.png" mode="widthFix" class="img"></image>
								<image v-if="item.status == 3" src="../../static/images/icon_25.png" mode="widthFix" class="img"></image>
							</view>
							<text class="text">+{{item.value}}</text>
						</view>
						<view class="label">{{index + 1}}天</view>
					</view>
				</view>
			</view>
			

			<!-- 我的服务 -->
			<view class="server-nav bg-white mt20" v-if="menuList && menuList.length > 0">
				<view>
					<view class="title row-between">
						<view class="lg">我的服务</view>
					</view>
				</view>
				<view class="nav row wrap">
					<view v-for="(item, index) in menuList" :key="index" class="item column-center mb20"
						:open-type="item.link_type == 3 ?'contact' :''" @tap="tapMenu(item)" style="width: 25%;">
						<image class="nav-icon" :src="item.image"></image>
						<view class="sm mt10">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		getUser
	} from '@/api/user';
	import {
		getOrderNum
	} from '@/api/recycle.js';
	import {
		getLeaseOrderNum
	} from '@/api/lease.js';
	import {
		getMenu
	} from '@/api/store'
	import {
		toLogin,
		wxMnpLogin
	} from '@/utils/login'
	import {
		menuJump,
		copy,
		setTabbar
	} from '@/utils/tools'
	import Cache from '@/utils/cache'
	const app = getApp()
	export default {
		data() {
			return {
				showNav: false,
				navH: 0,
				navBg: 0,
				menuList: [],
				statusBarH: "",
				recycleOrderNum: 0, // 回收订单数量
				leaseOrderNum: 0, // 租赁订单数量
				signInList:[
					{status: 1,value: 10},
					{status: 1,value: 20},
					{status: 1,value: 30},
					{status: 2,value: 40},
					{status: 3,value: 50},
					{status: 3,value: 60},
					{status: 3,value: 70},
				]
			};
		},

		components: {},
		props: {},

		onLoad(options) {
			setTabbar()
			this.getMenuFun();
		},

		onShow() {
			this.getUser();
			this.getCartNum();

			getOrderNum().then(res => {
				if (res.code != 1) return;
				this.recycleOrderNum = res.data;
			});

			getLeaseOrderNum().then(res => {
				if (res.code != 1) return;
				this.leaseOrderNum = res.data;
			});
		},
		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},

		onUnload() {},
		onPullDownRefresh() {
			this.getUser().then(() => {
				uni.stopPullDownRefresh();
			})
			this.getMenuFun();
		},
		onShareAppMessage() {
			const shareInfo = Cache.get('shareInfo')
			return {
				title: shareInfo.mnp_share_title,
				path: "pages/index/index?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_bg,
			};
		},
		methods: {
			...mapActions(['getCartNum', 'getUser']),
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					uni.navigateTo({
						url: '/bundle/pages/user_profile/user_profile'
					});
					return;
				}
				toLogin()
			},

			goPage(url) {
				if (!this.isLogin) return toLogin()
				uni.navigateTo({
					url
				});
			},
			tapMenu(item) {
				if (!this.isLogin) return toLogin()
				console.log(item)
				menuJump(item)
			},
			async getMenuFun() {
				const {
					data,
					code
				} = await getMenu({
					type: 2,
				})
				if (code == 1) {
					this.menuList = data
				}
			},

			onCopy(e) {
				copy(this.userInfo.sn);
			},



		},
		computed: {
			...mapGetters(["cartNum", "userInfo", "inviteCode", "appConfig"]),
			background() {
				const {
					center_setting
				} = this.appConfig
				return center_setting.top_bg_image ? {
					'background-image': `url(${center_setting.top_bg_image})`
				} : {}
			},
		}
	};
</script>
<style lang="scss">
	@import "index.scss";
</style>